<template>
  <div class="control">
    <div class="control-title">
      <span v-if="newParams.required" class="title-icon">*</span>
      <span class="title-label" :title="newParams.label">{{
        newParams.label
      }}</span>
    </div>
    <div class="control-content" :class="{ validateError: validateError }">
      {{ modelValue }}
      <slot></slot>
      <span
        v-if="newParams.required && pageViewMode === 'runtime' && !readonly"
        v-show="validateError"
        class="control-validate-error"
        >{{ newParams.label }}不能为空</span
      >
    </div>
    <UseControlOperate
      v-if="pageViewMode === 'design' && !readonly"
      v-bind="newParams"
      :show-dialog.sync="showDialog"
      class="control-operate"
    />
    <UseControlEditDialog
      v-if="showDialog"
      :params="newParams"
      :dialog-visible.sync="showDialog"
      @saveDialogConfig="saveDialogConfig"
    />
  </div>
</template>

<script>
import UseControlEditDialog from "./UseControlEditDialog.vue";
import UseControlOperate from "./UseControlOperate";
export default {
  name: "UseControlTemplate",
  components: { UseControlEditDialog, UseControlOperate },
  props: {
    newParams: {
      type: Object,
      default: () => {},
    },
    pageViewMode: {
      type: String,
      default: "runtime",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    modelValue: {
      type: String,
      default: "",
    },
    validateError: {
      type: Boolean,
      default: false,
    },
    saveDialogConfig: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      showDialog: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.control {
  flex-wrap: wrap;

  &.table {
    .control-title {
      width: 100%;
      margin-bottom: 10px;
      padding-right: 52px;
      justify-content: center !important;
    }

    &.hide-after {
      ::v-deep .control-content {
        cursor: default !important;
        &::after {
          display: none;
        }
      }
    }

    ::v-deep .control-content {
      flex: none !important;
      margin-left: 0 !important;
      width: calc(100% - 52px);
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 20px;
        left: 60px;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 99;
      }

      .table-luckysheet {
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0px;
        left: 0px;

        .luckysheet-cols-h-cells-c,
        .luckysheet-cell-flow-clip {
          width: 494px !important;
        }

        .luckysheet-cols-menu-btn {
          display: none !important;
        }

        #luckysheet-dropCell-icon {
          display: none;
        }
      }
    }
  }

  &.radio {
    .control-content {
      // overflow: hidden;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .el-radio {
        margin: 0;
        width: 50%;
        box-sizing: border-box;
        padding-right: 10px;
        display: flex;

        &.aline {
          width: 100%;
        }

        ::v-deep .el-radio__label {
          padding-left: 7px;
          line-height: 16px;
          white-space: pre-wrap;
          text-align: left;
          word-break: break-all;
        }
      }
    }
  }

  &.checkbox {
    .control-content {
      // overflow: hidden;

      ::v-deep .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;

        .el-checkbox {
          margin: 0;
          display: flex;
          box-sizing: border-box;
          padding-right: 10px;
          width: 50%;

          &.aline {
            width: 100%;
          }

          .el-checkbox__input {
            display: flex;
          }

          .el-checkbox__label {
            display: inline-block;
            padding-left: 7px;
            line-height: 16px;
            white-space: pre-wrap;
            text-align: left;
            word-break: break-all;
          }
        }
      }
    }
  }

  &.number {
    .control-content {
      text-align: left;
    }
  }

  &.image {
    & > .control-content {
      display: flex;
      align-items: center;
      ::v-deep &.readonly {
        & > .base-upload {
          cursor: default !important;
          ::v-deep .el-upload-dragger {
            cursor: default !important;
          }
        }
      }

      &.full {
        & > .base-upload {
          ::v-deep .el-upload-list {
            .el-upload-list__item {
              &:nth-child(n + 7) {
                margin-top: 0px;
              }

              &:nth-child(n + 8) {
                margin-top: 16px;
              }
            }
          }
        }
      }

      & > .base-upload {
        text-align: left;
        ::v-deep .el-upload-list {
          .el-upload-list__item {
            width: 112px;
            height: 88px;
            background-color: #f7f8f9;
            border-radius: 4px;
            border: 1px solid #dedede;
            margin-right: 10px;
            margin-bottom: 0;
            overflow: visible;
            cursor: pointer;

            &:nth-child(n + 7) {
              margin-top: 16px;
            }

            .el-upload-custom-list {
              width: 100%;
              height: 100%;

              .el-upload-list__item-actions {
                background-color: transparent;
                cursor: pointer;

                img {
                  position: absolute;
                  top: -11px;
                  right: -11px;
                }
              }
            }
          }
        }
        ::v-deep .el-upload.el-upload--picture-card {
          border: none;
          width: unset;
          height: unset;
          line-height: unset;
          border-radius: 4px;
          .el-upload-dragger {
            border: none;
            border-radius: 0;
            width: 100%;
            height: 100%;

            .el-upload-custom-text {
              &.next-row {
                margin-top: 16px;
              }
              .el-upload__text {
                width: 112px;
                height: 88px;
                border: 1px dashed #d9d9d9;

                & > img {
                  margin: 22px auto 0;
                }

                & > span {
                  display: block;
                  font-size: 12px;
                  transform: scale(0.8);
                  font-family: "Microsoft YaHei";
                  color: #666666;
                  line-height: 20px;
                }
              }
            }
          }
        }
        .el-upload__tip {
          line-height: 16px;
          font-size: 12px;
          transform: scale(0.7);
          transform-origin: 0 0;
          font-family: "Microsoft YaHei";
          color: #666666;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>
